<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="联络站详情"></uni-navbar></view>

		<view class="site-box" v-show="siteInfo.id">
			<view class="site-banner"><image class="image" :src="$imagePreview(siteInfo.logo)" mode="aspectFill"></image></view>

			<view class="p-info">
				<view class="p-name">
					<text class="text">{{ siteInfo.stationName }}</text>
					<u-icon class="icon" name="map-fill" color="#e5231a" size="48" @click="mapTo(siteInfo)"></u-icon>
					<u-icon class="icon" name="phone-fill" color="#e5231a" size="48" @click="call(siteInfo)"></u-icon>
				</view>
				<view class="left"><image class="image" :src="$imagePreview(siteInfo.logo)" mode="aspectFill"></image></view>
				<view class="right">
					<view class="p-nick">
						<!-- <u-icon class="icon" name="account" color="#666" size="22"></u-icon> -->
						站长：{{ siteInfo.masterName }}
					</view>
					<view class="p-time" v-if="siteInfo.workTime">
						<!-- <u-icon class="icon" name="clock" color="#666" size="22"></u-icon> -->
						工作时间：{{ siteInfo.workTime }}
					</view>
					<view class="p-add">
						<!-- <u-icon class="icon" name="map" color="#666" size="22"></u-icon> -->
						地址：{{ siteInfo.address }}
					</view>
				</view>
			</view>
		</view>

		<view class="site-info" v-show="siteInfo.id">
			<view class="h2-ttl">联络站介绍</view>
			<u-read-more ref="uReadMore1" closeText="点击更多" openText="收起" :showHeight="258" :toggle="true" :shadowStyle="{ backgroundImage: 'none' }">{{ siteInfo.stationDesc }}</u-read-more>
		</view>

		<view class="list-box" v-show="siteInfo.id">
			<view class="h2-ttl">
				代表成员
				<text class="text">（排名不分先后）</text>
			</view>
			<view class="list-info_09">
				<view class="info-item" v-for="(item, index) of infoList" :key="item.userId">
					<view class="info-img"><image class="image" :src="$imagePreview(item.photo)" mode="aspectFill"></image></view>
					<view class="info-title clamp">{{ item.userName }}</view>
					<view class="info-btm">
						<u-button class="form-btn" type="error" size="mini" :custom-style="customStyle1" @click="navTo('/pagesA/condi/add?sendTo=1&stationId=' + siteInfo.id + '&stationName=' + siteInfo.stationName + '&userId=' + item.userId + '&userName=' + item.userName)">
							反映问题
						</u-button>
					</view>
				</view>
				<view class="info-item" v-if="infoList && infoList.length % 3 == 2"></view>
			</view>
		</view>

		<!-- <u-loadmore :status="loading" /> -->

		<view class="fiexd-btm">
			<!-- <image class="form-btn" src="/static/img/btn_01.png" mode="widthFix" @click="navTo('/pagesA/condi/add?sendTo=2&stationId=' + siteInfo.id)"></image> -->
			<!-- <u-button class="form-btn" type="error" shape="circle" :custom-style="customStyle2" @click="navTo('/pagesA/condi/add?sendTo=2&stationId=' + siteInfo.id)">
				有事找联络站
			</u-button> -->
		</view>

		<u-modal v-model="show" :content="content" :zoom="false" :mask-close-able="true" :show-cancel-button="true">
			<template v-slot:confirm-button>
				<button class="btn hairline-left" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">确定</button>
			</template>
		</u-modal>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker
	},
	data() {
		return {
			scrollTop: 0,
			show: false,
			id: '',
			title: '',
			jsCode: '',
			content: '请绑定手机号',
			infoRes: {
				avatarUrl: '',
				gender: 0,
				nickName: '微信用户'
			},

			customStyle1: {},
			customStyle2: {},

			siteInfo: {},
			infoList: []
		};
	},
	onLoad(option) {
		this.id = option.id;
		if (option.q) {
			const q = decodeURIComponent(option.q);
			this.id = q.split('=')[1] || option.id;
		}
		this.loadLogin();
		this.loadData();
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	onShareAppMessage(res) {
		return {
			title: this.siteInfo.stationName || '有事找联络站',
			path: '/pagesA/condi/site_detail?id=' + this.id
		};
	},
	onShareTimeline(res) {
		return {};
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
			} else {
				// this.$logout();
				uni.login({
					provider: 'weixin',
					success: (res) => {
						if (res.code) {
							this.jsCode = res.code;
							console.log(this.jsCode);
						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				});
			}
		},
		loadData() {
			this.$request('/system/station/query/' + this.id, {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				this.siteInfo = res.data.stationInfo;
				this.infoList = res.data.stationInfo.userList;

				if (res.data.fileList) {
					this.siteInfo.logo = res.data.fileList[0].path;
				}

				this.$nextTick(() => {
					this.$refs.uReadMore1.init();
				});
			});
		},
		call(item) {
			uni.makePhoneCall({
				phoneNumber: item.phone
			});
		},
		mapTo(item) {
			let geography = item.remark.split(',');
			let res = this.$bd09_to_gcj02(geography[0], geography[1]);

			uni.openLocation({
				name: item.stationName,
				address: item.address,
				latitude: res.lat,
				longitude: res.lng,
				success: () => {
					console.log('success');
				}
			});
			return false;
		},
		siteTo(url) {
			uni.navigateTo({
				url: '/pagesA/condi/app?id=' + this.id + '&name=' + this.siteInfo.stationName
			});
		},
		navTo(url) {
			if (this.userInfo.sysUser) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.$store.commit('logout');
				uni.showModal({
					title: '提示',
					content: '请先登录？',
					success: (res) => {
						if (res.confirm) {
							this.getUserProfile();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		getUserProfile(e) {
			// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			uni.login({
				provider: 'weixin',
				success: (res) => {
					if (res.code) {
						this.jsCode = res.code;
						this.show = true;
					} else {
						console.log('登录失败！' + res.errMsg);
					}
				}
			});
		},
		onGetPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				//拒绝授权后弹出一些提示
				this.$msg('请同意获取手机号用于公众用户登录');
				console.log(e.detail);
			} else {
				this.encryptedData = e.detail.encryptedData; //加密的用户信息
				this.iv = e.detail.iv; //加密算法的初始向量
				// let pc = new WXBizDataCrypt('wxa3cad2b5781a0e48', this.session_key);
				// let data = pc.decryptData(e.detail.encryptedData, e.detail.iv);
				let data = {
					encryptedData: this.encryptedData,
					iv: this.iv,
					userInfo: this.infoRes,
					code: this.jsCode
				};
				this.submit(data);
			}
		},
		submit(form) {
			this.$request('/wechat/login', form, {
				load: true
			}).then((res) => {
				if (!res.data.userId) {
					this.$msg('登录失败');
					return false;
				}
				let userInfo = res.data;
				userInfo.userInfo = this.infoRes;
				userInfo.roleCodes = ['qunzhong'];
				userInfo.roleNames = ['人民群众'];

				userInfo.sysUser.clientCode = userInfo.sysUser.clientCode || '370783';

				this.$store.commit('login', userInfo);
				this.$msg('登录成功');
				// uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss">
.list-box {
	padding: 20rpx 30rpx;
	background-color: #fff;

	.h2-ttl {
		font-size: 17px;
		font-weight: bold;
		color: #333;
		line-height: 48rpx;

		.text {
			font-size: 14px;
			font-weight: normal;
			color: #999;
		}
	}
}

.site-banner {
	margin-bottom: 20rpx;
	padding: 20rpx 30rpx;
	background-color: #fff;

	.image {
		height: 320rpx;
		border-radius: 20rpx;
	}
}

.p-info {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 16rpx;

	.left {
		margin-right: 32rpx;
		width: 180rpx;
		height: 170rpx;
		border-radius: 12rpx;

		.image {
			width: 180rpx;
			height: 170rpx;
			border-radius: 12rpx;
		}
	}

	.p-name {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		width: 100%;
		font-size: 17px;
		font-weight: bold;
		color: #333;
		line-height: 52rpx;

		.text {
			margin-right: 20rpx;
		}

		.icon {
			flex-shrink: 0;
			margin-left: auto;
			margin-right: 0;
			width: 48rpx;
			height: 48rpx;

			& + .icon {
				margin-left: 10rpx;
			}
		}
	}

	.p-nick,
	.p-time {
		margin-bottom: 15rpx;
	}

	.p-addr {
	}

	.icon {
		margin-right: 5rpx;
	}

	.right {
		flex: 1;
		font-size: 16px;
		color: #666;
		line-height: 52rpx;

		.image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

.label-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 16px;
	color: #333;
	line-height: 44rpx;

	.item {
		padding: 20rpx 0;
		width: 50%;
		min-width: 30%;
		text-align: center;
	}

	.icon {
		margin-right: 5rpx;
		vertical-align: top;
	}
}

.site-info {
	margin-bottom: 20rpx;
	padding: 20rpx 30rpx;
	font-size: 17px;
	color: #333;
	line-height: 52rpx;
	background-color: #fff;

	.h2-ttl {
		margin-bottom: 20rpx;
		font-weight: bold;
	}
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}
}

.fiexd-btm {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 30rpx 30rpx;
	background-image: linear-gradient(transparent 15rpx, #fff);
	// background-image: linear-gradient(to bottom , #7A88FF, #7AFFAF);
}
</style>
